<!--
 * @Author: 郑文森
 * @Date: 2021-12-20 16:37:27
 * @LastEditors: 郑文森
 * @LastEditTime: 2022-04-14 21:23:46
 * @FilePath: \Talent recruitment system\frontend\src\views\resume\resumeDetails.vue
 * @Description: 简历详情页面
-->
<template>
  <el-card class="container-card">
    <el-row>
      <el-col :span="3">
        <el-avatar
          :src="src"
          shape="square"
          style="width: 100px; height: 100px"
        ></el-avatar>
      </el-col>
      <el-col :span="16">
        <div>
          <h3>{{ dname }}</h3>
        </div>
        <div>
          <span>{{ gender }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ age }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ experience }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ education }}</span>
          <el-divider direction="vertical"></el-divider>
          <span>{{ area }}</span>
          <el-row style="margin-top: 10px">
            <span> 手机号码：{{ telephone }} </span>
            <el-divider direction="vertical"></el-divider>
            <span>微信/QQ：{{ wxqq }}</span>
            <el-divider direction="vertical"></el-divider>
            <span>邮箱：{{ email }}</span>
          </el-row>
        </div>
      </el-col>
      <el-col :span="5">
        <span style="font-size: 10px; margin-right: 10px; color: gray">
          更新日期：{{ updateTime }}
        </span>
        <span style="font-size: 10px; color: gray">被浏览：{{ browse }}次</span>
        <div style="margin-top: 30px">
          <el-button icon="el-icon-download">下载简历</el-button>
          <el-button type="danger" icon="el-icon-phone-outline">
            邀请面试
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-divider></el-divider>
    <div>
      <h3>求职意向</h3>
      <el-row-group>
        <el-row style="margin-bottom: 10px">
          <span style="margin-right: 200px">
            意向岗位：
            <el-tag type="dangder" effect="dark">
              {{ position }}
            </el-tag>
          </span>
          <span style="margin-right: 200px">从事行业：{{ industry }}</span>
          <span>工作地点：{{ workingPlace }}</span>
        </el-row>
        <el-row>
          <span style="margin-right: 200px">到岗时间：{{ arrivalTime }}</span>
          <span>求职状态：{{ state }}</span>
        </el-row>
      </el-row-group>
    </div>
    <el-divider></el-divider>
    <div>
      <h3>工作经历</h3>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(workExperience, index) in workExperiences"
        :key="index"
        :timestamp="workExperience.timestamp"
        placement="top"
        color="green"
      >
        <el-card>
          <el-row>
            <el-col :span="3">
              <h4>
                {{ workExperience.ename }}
              </h4>
            </el-col>
            <el-col :span="3">
              <h4>{{ workExperience.position }}</h4>
            </el-col>
          </el-row>
          <p>{{ workExperience.work }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-divider></el-divider>
    <div>
      <h3>教育经历</h3>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(study, index) in studies"
        :key="index"
        :timestamp="study.timestamp"
        placement="top"
        color="red"
      >
        <el-card>
          <el-row>
            <el-col :span="3">
              <h4>
                {{ study.schoolName }}
              </h4>
            </el-col>
            <el-col :span="3">
              <h4>{{ study.schoolType }}</h4>
            </el-col>
          </el-row>
          <p>{{ study.major }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-divider></el-divider>
    <div>
      <h3>项目经验</h3>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(project, index) in projects"
        :key="index"
        :timestamp="project.timestamp"
        placement="top"
        color="yellow"
      >
        <el-card>
          <el-row>
            <el-col :span="3">
              <h4>
                {{ project.projectName }}
              </h4>
            </el-col>
            <el-col :span="3">
              <h4>{{ project.position }}</h4>
            </el-col>
          </el-row>
          <p>{{ project.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-divider></el-divider>
    <div>
      <h3>培训经历</h3>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(train, index) in trains"
        :key="index"
        :timestamp="train.timestamp"
        placement="top"
        color="pink"
      >
        <el-card>
          <el-row>
            <el-col :span="3">
              <h4>
                {{ train.trainName }}
              </h4>
            </el-col>
            <el-col :span="3">
              <h4>{{ train.direction }}</h4>
            </el-col>
          </el-row>
          <p>{{ train.content }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-divider></el-divider>
    <div>
      <h3>职业技能</h3>
    </div>
    <el-timeline>
      <el-timeline-item
        v-for="(skill, index) in skills"
        :key="index"
        placement="top"
        color="black"
      >
        <el-card>
          <el-row>
            <el-col :span="3">
              <h4>
                {{ skill.skillName }}
              </h4>
            </el-col>
            <el-col :span="3">
              <h4>{{ skill.degree }}</h4>
            </el-col>
            <el-col :span="3">
              <h4>{{ skill.duration }}</h4>
            </el-col>
          </el-row>
        </el-card>
      </el-timeline-item>
    </el-timeline>

    <el-divider></el-divider>
    <div>
      <h3>其他信息</h3>
    </div>

    <el-divider></el-divider>
    <div>
      <h3>自我评价</h3>
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      src: "https://s2.loli.net/2021/12/22/4O6LnqGBJmMScbo.jpg",
      dname: "张旦流",
      gender: "男",
      age: "20",
      experience: "应届生",
      education: "本科",
      area: "菲律宾",
      updateTime: "2021年12月22日",
      browse: "11",
      position: "马六甲海盗",
      industry: "互联网",
      workingPlace: "马六甲海峡",
      arrivalTime: "随时到岗",
      state: "离职-正在求职",
      telephone: "13333333333",
      wxqq: "13333333333",
      email: "777777777@qq.com",

      workExperiences: [
        {
          ename: "马六甲黑珍珠号",
          position: "左炮手兼职副船长",
          work: "负责船体左侧三门印第安加农炮，负责航线规划和吃新鲜的海蛎",
          timestamp: "2021年12月22日",
        },
        {
          ename: "深海大监狱",
          position: "犯人",
          work: "蹲大牢，踩缝纫机",
          timestamp: "2020年12月20日",
        },
      ],

      studies: [
        {
          schoolName: "马六甲大学",
          schoolType: "本科",
          major: "海盗工程",
          timestamp: "2022年6月-2018年9月",
        },
        {
          schoolName: "菲律宾国立高中",
          schoolType: "高中",
          major: "",
          timestamp: "2018年6月-2015年9月",
        },
      ],

      projects: [
        {
          projectName: "洗劫飞行的荷兰人",
          position: "冲锋手",
          content: "带头冲锋，成功抢到飞行的荷兰人的神秘袜子",
          timestamp: "2022年6月-2018年9月",
        },
      ],

      trains: [
        {
          trainName: "亚特兰蒂斯培训学院",
          direction: "深海憋气",
          content: "训练深海憋气八小时",
          timestamp: "2021年12月-22021年9月",
        },
      ],

      skills: [
        {
          skillName: "海盗黑话",
          degree: "精通",
          duration: "20年",
        },
      ],

      policyNo: "",
    };
  },
};
</script>

<style scoped>
.container-card {
  margin: 13px;
  height: 100%;
}
</style>